*{
    font-family: '微软雅黑';
    box-sizing: border-box;
}
body{
    margin: 0;
}

.h1{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0)
}


.pagein-enter {
    transform: translate(100%, 0);
    opacity: 0;
}

.pagein-enter-to,
.pagein-leave ,
.pageout-enter-to,
.pageout-leave
{
    transform: translate(0, 0);
    opacity: 1;
}

.pagein-leave-to {
    transform: translate(-30%, 0);
    opacity: 0;
}

.pageout-enter {
    transform: translate(-100%,0);
    opacity: 0;
}

.pageout-leave-to {
    transform: translate(100%, 0);
    opacity: 0;
}

.pagein-enter-active,
.pagein-leave-active,
.pageout-enter-active,
.pageout-leave-active {
    transition: all 0.7s ease-in-out;
    position: absolute;
    width: 100%;
}